<template>
    <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="dialogClose"
            :custom-class="`hy-dialog control-dialog ${ fromList.length ? 'is_add' : '' }`">
        <div class="dialog-content">

            <!--用户确认-->
            <div class="confirm-info" v-if="!fromList.length">
                <div class="info-title">操作人员身份确认</div>
                <el-form ref="confirmForm" :inline="true" :model="confirmForm" label-width="80px">
                    <el-form-item label="账号：">
                        <el-input v-model="confirmForm.name" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：">
                        <el-input v-model="confirmForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-form>

                <el-button type="primary" @click="confirmSubmit()">确认</el-button>
                <el-button type="info" @click="dialogClose()">取消</el-button>
            </div>

            <div class="handle-box" v-if="!contentHide">
                <template v-if="!fromList.length">
                    <div class="item-row">
                        <div class="item-info">
                            <span class="item-info-label">控制点位：</span>
                            <span class="item-info-val">1号阀门</span>
                        </div>
                        <div class="item-info">
                            <span class="item-info-label">控制类型：</span>
                            <el-switch
                                    v-model="handleForm.switch"
                                    :disabled="handleDisabled"
                                    active-color="#2C50EE"
                                    :width="200"
                                    class="hy_switch switch_inner_font"
                                    active-text="遥调"
                                    inactive-text="遥控"
                                    inactive-color="#CFD1D8">
                            </el-switch>
                        </div>
                        <div class="item-info">
                            <span class="item-info-label">设值：</span>
                            <el-input-number :disabled="handleDisabled" class="hy-input-num" v-model="handleForm.num" :min="1" ></el-input-number>
                        </div>
                    </div>
                </template>

                <template v-else>

                    <el-form class="from-wrap" ref="handleForm" :inline="true" :model="handleForm">
                        <el-form-item v-for="item in fromList"
                                      :label="item.name"
                                      :prop="item.label"
                                      :rules="item.isRules ? [{required: true, message: ('请'+ ( item.type === 'input' ? '输入' : '选择' ) + item.name), trigger: item.type === 'input' ? 'blur' : 'change'}] : [{required: false}]"
                        >
                            <template v-if="item.type === 'input'">
                                <el-input class="item-input"
                                          v-model="handleForm[ item.label ]"
                                          placeholder="请输入"
                                          :disabled="handleDisabled || item.isDisabled"
                                ></el-input>
                            </template>

                            <template v-else-if="item.type === 'select'">
                                <el-select class="item-select" v-model="handleForm[ item.label ]" placeholder="请选择" >
                                    <el-option
                                            v-for="obj in item.option"
                                            :key="obj.value"
                                            :label="obj.label"
                                            :value="obj.value"
                                            :disabled="handleDisabled || item.isDisabled">
                                    </el-option>
                                </el-select>
                            </template>

                            <template v-else-if="item.type === 'datetime'">
                                <el-date-picker
                                        v-model="handleForm[ item.label ]"
                                        type="datetime"
                                        :clearable="false"
                                        prefix-icon="el-icon-date"
                                        placeholder="请选择">
                                </el-date-picker>
                            </template>

                        </el-form-item>
                    </el-form>
                </template>

                <el-button type="primary" :disabled="handleDisabled" @click="handleSave()">确认</el-button>
                <el-button type="info" :disabled="handleDisabled" @click="dialogClose()">取消</el-button>
            </div>

        </div>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            // 弹窗标题
            dialogTitle: {
                type: String,
                default:function () {
                    return ''
                },
            },

            // 内容隐藏
            contentHide: {
                type: Boolean,
                default:function () {
                    return false
                },
            },

            // 表单列表
            fromList: {
                type: Array,
                default: function () {
                    return []
                },
            },
        },
        data() {
            return {
                dialogVisible: false,
                confirmForm: {

                },
                handleForm: {},

                handleDisabled: true,

                rules: {},
            }
        },
        methods: {
            confirmSubmit() {
                this.handleDisabled = false;
            },

            handleSave() {

                this.$refs['handleForm'].validate((valid) => {
                    if (valid) {
                        this.$parent.handleSave(  this.handleForm  );
                    } else {
                        return false;
                    }
                });
            },

            dialogClose() {
                if( this.$refs['confirmForm'] ) {
                    this.$refs['confirmForm'].resetFields();
                }

                if( this.$refs['handleForm'] ) {
                    this.$refs['handleForm'].resetFields();
                }

                this.handleForm = {};

                this.handleDisabled = true;
                this.dialogVisible = false;
            },
        },
        mounted() {

        }
    }
</script>

<style lang="less">
    .control-dialog {
        min-height: auto !important;

        >.el-dialog__body {
            width: 100%;
            padding-left: 165px;
            padding-right: 165px;
            padding-bottom: 70px;

            >.dialog-content {
                width: 100%;

                >.confirm-info {
                    padding-bottom: 50px;

                    >.info-title {
                        font-size: 20px;
                        font-weight: 600;
                        color: #232323;
                        line-height: 28px;
                        margin-bottom: 20px;
                    }

                    >.el-form {

                        >.el-form-item {
                            position: relative;
                            width: calc( 50% - 25px );
                            margin-right: 50px;
                            margin-bottom: 30px;

                            &:nth-of-type( 2n ) {
                                margin-right: 0;
                            }

                            >.el-form-item__label {
                                position: absolute;
                                line-height: 52px;
                                font-size: 18px;
                                color: #232323;
                                z-index: 10;
                                text-align: left;
                                left: 16px;
                            }

                            >.el-form-item__content {
                                width: 100%;

                                >.el-input {

                                    .el-input__inner {
                                        height: 52px;
                                        line-height: 52px;
                                        background: #FFFFFF;
                                        border-radius: 4px;
                                        border: 1px solid #CFD1D8;
                                        box-sizing: border-box;
                                        padding-left: 78px;
                                        color: #232323;
                                        font-size: 18px;

                                        &::placeholder {
                                            color: #CFD1D8;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                >.handle-box {
                    width: 100%;

                    >.item-row {
                        padding-top: 60px;
                        border-top: 1px solid #EEEFF2;
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 30px;

                        >.item-info {
                            line-height: 50px;

                            >.item-info-label {
                                display: inline-block;
                                vertical-align: top;
                                font-size: 20px;
                                color: #0E1526;
                            }

                            >.item-info-val {
                                display: inline-block;
                                vertical-align: top;
                                font-size: 20px;
                                font-weight: 600;
                                color: #0E1526;
                            }

                        }
                    }

                    >.from-wrap {
                        text-align: left;

                        >.el-form-item {
                            width: calc( 100% / 3 - 34px );
                            margin-right: 51px;
                            margin-bottom: 24px;

                            >.el-form-item__label {
                                display: block;
                                font-size: 16px;
                                color: #232323;
                                line-height: 25px;
                                text-align: left;
                                width: 100% !important;
                            }

                            >.el-form-item__content {
                                width: 100%;

                                >.item-input {

                                    >.el-input__inner {
                                        width: 100%;
                                        height: 40px;
                                        background: #FFFFFF;
                                        border-radius: 2px;
                                        border: 1px solid #CFD1D8;
                                        box-sizing: border-box;
                                        line-height: 38px;
                                        font-size: 17px;
                                        color: #0E1526;

                                        &::placeholder {
                                            color: #CFD1D8;
                                        }
                                    }
                                }

                                >.item-select {
                                    width: 100%;

                                    >.el-input {

                                        >.el-input__inner {
                                            width: 100%;
                                            height: 40px;
                                            background: #FFFFFF;
                                            border-radius: 2px;
                                            border: 1px solid #CFD1D8;
                                            box-sizing: border-box;
                                            line-height: 38px;
                                            font-size: 17px;
                                            color: #0E1526;

                                            &::placeholder {
                                                color: #CFD1D8;
                                            }
                                        }
                                    }
                                }

                                >.el-date-editor {
                                    width: 100%;

                                    >.el-input__inner {
                                        width: 100%;
                                        height: 40px;
                                        background: #FFFFFF;
                                        border-radius: 2px;
                                        border: 1px solid #CFD1D8;
                                        box-sizing: border-box;
                                        line-height: 38px;
                                        font-size: 17px;
                                        color: #0E1526;
                                        padding-left: 40px;

                                        &::placeholder {
                                            color: #CFD1D8;
                                        }
                                    }

                                    >.el-input__prefix {
                                        left: 8px;

                                        >.el-input__icon {
                                            font-size: 18px;
                                            color: #CFD1D8;
                                        }
                                    }
                                }
                            }

                            &:nth-of-type( 3n ) {
                                margin-right: 0;
                            }
                        }
                    }
                }

                .el-button {
                    width: 120px;
                    height: 50px;
                    border-radius: 4px;
                    font-size: 22px;
                    margin-top: 10px;
                }

                .el-button+.el-button {
                    margin-left: 50px;
                }
            }
        }

        &.is_add {

            >.el-dialog__body {
                padding-left: 110px;
                padding-right: 110px;

                .handle-box {
                    text-align: center;
                }

                .el-button {
                    margin-top: 100px;
                }
            }
        }
    }
</style>
